﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>login</title>
    <!--引入extjs样式文件-->
    <link rel="stylesheet" type="text/css" href="ExtJS/classic/theme-triton/resources/theme-triton-all.css" />
    <!--引入核心库-->
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>
     <!--引入国际化文件-->    
    <script src="ExtJS/classic/locale/locale-zh_CN.js"></script>
    <script>

        //Ext初始化完成后才可以调用其中方法
        Ext.onReady(function () {
           
                Ext.define('User', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'id',       type: 'int'},
                    {name: 'firstname', type: 'string'},
                    {name: 'lastname',  type: 'string'},
                    {name: 'phone',  type: 'string'},
                    {name: 'age',       type: 'int'},
                    {name: 'state',  type: 'boolean'}
                ]
                });

                var myStore = Ext.create('Ext.data.Store', {
                model: 'User',
                autoLoad: true,
                pageSize:4,                         
                proxy: {
                    type: 'ajax',
                    url: 'Json/users.json',
                    reader: {
                        type: 'json',
                        root: 'users'                      
        
                            }}              
                });

                Ext.create('Ext.grid.Panel', {
                title: '用户管理',
                store:myStore,
                forceFit:true, 
                columnLines:true, 
                renderTo:Ext.getBody(),
                bbar: [{ xtype:'pagingtoolbar', displayinfo:true,store:myStore }], //分页条   
                columns: [
                    {text: '序号',  dataIndex:'id'},
                    {text: '姓氏',  dataIndex:'firstname'},
                    {text: '名字',  dataIndex:'lastname'},
                    {text: '电话',  dataIndex:'phone'},
                    {text: '年龄',  dataIndex:'age'},
                    {text: '状态',  dataIndex:'state',renderer:function(value){return value?"在职":"<font color='red'>离职</font>"}}
                    ]   
            });
        })
    </script>
</head>
<body>

</body>
</html>